import { useState } from 'react';
import { Link, Outlet } from 'react-router-dom';

export default function Message() {
    const [messages] = useState([
        {
            id: '001',
            title: 'message001',
            message: 'Demo_message_001'
        },
        {
            id: '002',
            title: 'message002',
            message: 'Demo_message_002'
        },
        {
            id: '003',
            title: 'message003',
            message: 'Demo_message_003'
        }
    ]);

    return (
        <div>
            <ul>
                {messages.map(message => (
                    <li key={message.id}>
                        <Link to={`detail?id=${message.id}&title=${message.title}&message=${message.message}`}>{message.title}</Link>
                    </li>
                ))}
            </ul>
            <Outlet/>
        </div>
    );
}
